<template>
  <div class="article-box flex-col-start">
    <div class="article-body">
      <el-container>
        <el-aside class="article-aside" width="300px">
          <UserInfoCard class="article-aside-item"></UserInfoCard>
        </el-aside>
        <el-container>
          <el-main class="article-main flex-col-start">
            <div class="article-main-title">
              {{ art.title }}
            </div>

            <div class="article-main-info flex-row-start">
              <div class="article-main-tag-box flex-row-start">
                <span>标签</span>
                <MiTag v-for="(item,index) in art.tagList" :i="index" style="margin-right: 2px">{{ item.name }}</MiTag>
              </div>
              <div class="date">
                <span>创建时间</span>
                {{ format(art.createTime) }}
              </div>
            </div>
            <el-divider></el-divider>
            <div class="article-main-content">
              {{ art.content }}
            </div>
          </el-main>
          <el-footer>

          </el-footer>
        </el-container>

      </el-container>
      <div class="article-menu-box flex-col-start">
        <el-button :icon="like?'iconfont icon-aixin':'iconfont icon-aixin1'" :style="{color:like?'red':'black'}" circle
                   @click="handleLike"></el-button>
        <el-button :icon="collect?'el-icon-star-on':'el-icon-star-off'" :style="{color:collect?'tomato':'black'}" circle
                   @click="handleCollect"></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import MiTag from "@/components/label/MiTag.vue";
import {format, formatDate} from "../../util/DateUtil";
import UserInfoCard from "@/components/user/UserInfoCard.vue";

export default {
  name: "Article",
  components: {UserInfoCard, MiTag},
  data() {
    return {
      like: false,
      collect: false,
      art: {
        title: "测试标题",
        content: "测试内容",
        createTime: new Date(),
        tagList: [
          {
            name: "java",
          },
          {
            name: "python"
          }
        ]
      }
    }
  },
  methods: {
    format,
    formatDate,
    handleCollect() {
      this.collect = !this.collect
    },
    handleLike() {
      this.like = !this.like
    }
  }
}
</script>

<style lang="less" scoped>
.article-box {
  width: 100%;
  //background-color: #1c1c1c;
  .article-body {

    width: 85%;
    min-height: 100vh;
    margin-top: 10px;

    .article-aside {
      border-radius: 5px;
      min-height: 100vh;
      background-color: transparent;
      //box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
      .article-aside-item {
        margin: 20px 0;
      }
    }

    .article-main {
      margin-left: 10px;
      border-radius: 5px;
      background-color: white;
      min-height: 100vh;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .article-main-title {
        width: 90%;
        font-size: 24px;
        text-align: left;
        font-weight: 600;
      }

      .article-main-info {

        width: 90%;
        padding: 20px 0;

        .article-main-tag-box {
          width: 100%;
        }

        span {
          font-size: 14px;
          font-weight: 600;
          margin-right: 3px;
        }

        .date {
          white-space: nowrap;
          float: right;
          font-size: 14px;
        }
      }

      .article-main-content {
        width: 90%;
        text-align: left;
      }
    }

    .article-menu-box {
      position: fixed;
      right: 50px;
      top: 50vh;

      .el-button {
        margin: 5px 0;

      }
    }
  }
}
</style>